import {Component, ComponentProps, VueComponent, Mut, Computed} from "vue3-oop";
import {NForm, NFormItemGi, NGrid, NInputGroup,NInputGroupLabel,NInput,NButton, NSelect, NCheckbox} from "naive-ui";
import BpmnModeler from '../../../BpmnModeler';
import styles from './index.module.scss';

interface IProps {
  bpmnModeler: BpmnModeler,
}
@Component()
export default class SequenceFlowPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    bpmnModeler: {},
  }

  public static tabKey = "SequenceFlowPanel"
  public static tabName = "流转路径"

  @Mut() private state = {
    // 跳过表达式
    skipExpression: '',
    // 流转条件
    conditionExpression: '',
  }

  private setConfigValues = (config:any)=>{
    this.props.bpmnModeler.selectedCell.updateData(config);
  }

  private getConfigValues = ()=>{
    const { selectedCell } = this.props.bpmnModeler;
    this.state.skipExpression = selectedCell.data?.skipExpression || '';
    this.state.conditionExpression = selectedCell.data?.conditionExpression || '';
  }

  private updateSkipExpression=(value:string)=>{
    this.state.skipExpression = value;
    this.setConfigValues({ skipExpression: this.state.skipExpression });
  }

  private updateConditionExpression=(value:string)=>{
    this.state.conditionExpression = value;
    this.setConfigValues({ conditionExpression: this.state.conditionExpression });
  }

  render(){
    this.getConfigValues();
    return(
      <NForm labelPlacement="left" labelWidth={100}>
        <NGrid cols={2} xGap={20}>
          <NFormItemGi label="跳过表达式"><NInput value={this.state.skipExpression} onUpdateValue={this.updateSkipExpression}/></NFormItemGi>
          <NFormItemGi label="流转条件"><NInput value={this.state.conditionExpression} onUpdateValue={this.updateConditionExpression}/></NFormItemGi>
        </NGrid>
      </NForm>
    )
  }
}